<template>
  <div class="home-container">
    <router-view @getID="getID" @tabbarID="tabbarID"></router-view>
    <!-- 底部标签栏 -->
    <div class="tabbar-box" v-show="$route.meta.show && showTabbar">
      <van-tabbar v-model="active" active-color="orange" inactive-color="#999999">
        <van-tabbar-item icon="shop-o">{{ $t('m.menu.shop') }}</van-tabbar-item>
        <van-tabbar-item icon="apps-o">{{ $t('m.menu.menu') }}</van-tabbar-item>
        <van-tabbar-item icon="notes-o">{{ $t('m.menu.order') }}</van-tabbar-item>
        <van-tabbar-item icon="user-o">{{ $t('m.menu.user') }}</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import bus from '@/eventBus.js'
export default {
  data() {
    return {
      // tabbar 底部标签默认选择 id
      active: 1,
      goodsPageID: 0,
      showTabbar: false
    }
  },
  created() {
    // 初始化当前商店信息, 防止刷新丢失当前商店 ID
    var shopsList = JSON.parse(sessionStorage.getItem('saveNowShop'))
    if (shopsList !== null) {
      this.goodsPageID = shopsList.id
    }
    // 初始化首页路径，首页刷新不跳转商品页
    var homePath = this.$route.fullPath
    if (homePath === '/home/homepage') {
      this.active = 0
      this.showTabbar = false
    }
    // 初始化刷新页面路径, 其它页面刷新跳转商品页
    if (this.active === 1) {
      this.$router.push('/home/goodspage/' + this.goodsPageID)
      this.showTabbar = true
    }
    bus.$on('tabbarStatus', val => {
      this.showTabbar = val
    })
  },
  watch: {
    active(val) {
      switch (val) {
        case 0:
          this.$router.push('/home/homepage')
          this.showTabbar = false
          break
        case 1:
          this.$router.push('/home/goodspage/' + this.goodsPageID)
          this.showTabbar = true
          break
        case 2:
          this.$router.push('/home/order')
          this.showTabbar = true
          break
        default:
          this.$router.push('/home/account')
          this.showTabbar = true
          break
      }
    }
  },
  methods: {
    // 点击商店获取当前 ID ,并切换 tabbar 选择位置
    getID(id) {
      this.goodsPageID = id
      this.active = 1
      this.showTabbar = true
    },
    tabbarID(active) {
      this.active = active
    }
  }
}
</script>

<style lang="less">
.tabbar-box {
  .van-tabbar--fixed {
    max-width: 640px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
